<template>
	<view class="container">
<!-- 		<view class="bg">
			<image src="../../../static/images/account_bg.png" mode="" style="width: 750rpx;height: 698rpx;"></image>
		</view> -->

		<cover-view class="top" @click="back">
			<image class="back" src="../../../static/images/account_back.png" mode=""
				style="width: 48rpx;height: 48rpx;"></image>
			<text>注册</text>
		</cover-view>
		<view class="shading">
			<image :src="logoUrl" />
		</view>
		<view class="form">
			<view class="input">
				<image src="../static/code-account.png" style="width: 56rpx;height: 56rpx;"></image>
				<input v-model="params.account" type="text" placeholder="请输入账号|8位数字" style="padding-left: 10rpx;" placeholder-class="input-placeholder"
					@blur="check" />
			</view>
			<view class="input">
				<image src="../static/code_1.png" style="width: 28rpx; height: 32rpx;margin-left: 10rpx;"></image>
				<input :type="newPass?'password':'text'" placeholder="新密码(8-25位数字字母)"
					placeholder-class="input-placeholder" @blur="check" @input="inputPass" style="margin-left: 5rpx;padding-left: 25rpx;" />
				<image @click="newPass = !newPass" class="hide" src="../../../static/images/account_hide.png" mode=""
					style="width: 32rpx;height: 32rpx;"></image>
			</view>
			<view class="input">
				<image src="../static/code_1.png" style="width: 28rpx; height: 32rpx;margin-left: 10rpx;"></image>
				<input :type="truePass?'password':'text'" placeholder="请再次确认密码" placeholder-class="input-placeholder"
					@blur="check" @input="inputSure"  style="margin-left: 5rpx;padding-left: 25rpx;" />
				<image @click="truePass = !truePass" class="hide" src="../../../static/images/account_hide.png" mode=""
					style="width: 32rpx;height: 32rpx;"></image>
			</view>
			<view class="input">
				<image src="../static/phone_1.png" style="width: 24rpx;height: 34rpx;margin-left: 10rpx;"></image>
				<input v-model="params.phone" type="text" placeholder="请输入手机号" placeholder-class="input-placeholder"
					@blur="check"  style="padding-left: 10rpx;"/>
			</view>
			<view class="parent-user" v-if="is_show">
				<text style="">推荐人账号:</text> 
				<text style="margin-left: 20rpx;color: red;"> {{ '<' + parentinfo.user_account + '>' }} </text>
			</view>
			<view class="btn-s">
				<text class="tips">{{tips}}</text>
				<button class="btn" @click="btn" :disabled="!check()">确定</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		set_login,
		register
	} from "@/api/user.js"
	import {
		getOtherUserInfo
	} from "@/api/api.js"
	import {
		getLogo
	} from "@/api/public";
	let time;
	let _this;
	const BACK_URL = "login_back_url";
	export default {
		data() {
			return {
				truePass: true,
				newPass: true,
				tips: "",
				params: {
					account: "",
					password: "",
					surePassword: "",
					phone:""
				},
				logoUrl:'',
				is_show: false,
				parentinfo: {}
			}
		},
		onLoad() {
			// 如果有上级推荐人时
			if(this.$Cache.get("spread")){
				this.otherInfo()
			}
		},
		onUnload() {
			if (time != null) {
				clearTimeout(time);
			}
		},
		mounted: function(res) {
			this.getLogoImage();
		},
		methods: {
			otherInfo() {
				let that = this;
				getOtherUserInfo({id:this.$Cache.get("spread")}).then(res => {
					that.is_show = true
					that.parentinfo = res.data
				}).catch(err => {
					uni.showToast({
						icon: "none",
						title: err,
						mask: true
					})
				})
			},
			inputPass(e) {
				this.params.password = e.detail.value;
				this.check()
			},
			inputSure(e) {
				this.params.surePassword = e.detail.value;
				this.check()
			},
			myTrim(x) {
				return x.replace(/^\s+|\s+$/gm, '');
			},
			check() {
				let flag = true;
				//验证
				if (this.myTrim(this.params.account).length == 0) {
					this.tips = "请填写账户";
					flag = false;
					return flag;
				}
				if (this.myTrim(this.params.password).length == 0) {
					this.tips = "请填写密码";
					flag = false;
					return flag;
				}
				if (this.myTrim(this.params.surePassword).length == 0) {
					this.tips = "请确认密码";
					flag = false;
					return flag;
				}
				if (this.myTrim(this.params.password) != this.myTrim(this.params.surePassword)) {
					this.tips = "两次密码不一致";
					flag = false;
					return flag;
				}
				if (this.myTrim(this.params.phone).length == 0) {
					this.tips = "请输入手机号";
					flag = false;
					return flag;
				}
				this.tips = "";
				return flag;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getLogoImage() {
				let that = this;
				getLogo(2).then(res => {
					that.logoUrl = res.data.logo_url;
				});
			},
			btn() {
				if (this.check()) {
					register({
						account: this.params.account,
						// captcha: "",这里不需要验证码了
						password: this.params.password,
						phone: this.params.phone,
						spread: this.$Cache.get("spread")
					}).then(res => {
						uni.showToast({
							icon: "none",
							title: "注册成功",
							mask: true
						})
						time = setTimeout(function() {
							_this.back();

						})
					}).catch(err => {
						uni.showToast({
							icon: "none",
							title: err,
							mask: true
						})
					})





					// set_login({
					// 	account: this.params.account,
					// 	password: this.params.password
					// }).then(res => {
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: "设置成功",
					// 		mask: true
					// 	})
					// 	time = setTimeout(function() {
					// 		_this.back();

					// 	})
					// }).catch(err=>{
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: err,
					// 		mask: true
					// 	})
					// })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	body,
	page {
		background-color: #fff !important;
	}
	.container {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #fff !important;
	}
	
	.shading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	
		/* #ifdef APP-VUE */
		margin-top: 100rpx;
		/* #endif */
		/* #ifndef APP-VUE */
	
		margin-top: 100rpx;
		/* #endif */
	
	
		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
	}

	.top {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		position: relative;

		.back {
			margin-right: 16rpx;
			margin-left: 24rpx;
		}

		.back:after {
			content: "";
			position: absolute;
			left: -26rpx;
			top: -26rpx;
			width: 100rpx;
			height: 100rpx;
			/*Other styles*/
		}

		>text {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
		}

	}

	.share-box {
		width:100%;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #fefefe;
		image {
			width:100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
		.share-info{
			width: 300rpx;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: 10rpx;
			.share-tag {
				font-size: 18rpx;
				color: #999;
			}
		}
	}
	.parent-user{
		width: 100%;
		display:flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 30rpx;
	}
	
	.form {
		.input {
			width: 558rpx;
			height: 128rpx;
			padding-bottom: 16rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin: auto;

			input {
				width: calc(100% - 48rpx);
			}
		}
	}

	.input-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-left: 10rpx;
	}

	.hide::after {
		content: "";
		position: absolute;
		left: -16rpx;
		top: -16rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.btn-s {
		margin: 30rpx auto;
		.tips {
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #FF7547;
		}
	}

	.btn {
		width: 558rpx;
		height: 80rpx;
		background-color: rgba(254,92,45,1);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		margin: 60rpx auto;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}
</style>